import './index.css';
import { UserOutlined, PlaySquareOutlined, QrcodeOutlined, AudioOutlined } from '@ant-design/icons';
import { Space, Table, Avatar, Image } from 'antd';
import React from 'react';
import { useNavigate } from 'react-router-dom';
import { useState, useEffect } from 'react'
import AllData from '../../../api/AllXie'
import * as echarts from 'echarts';
import { BarChart } from 'echarts/charts';
// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
import {
    TitleComponent,
    TooltipComponent,
    GridComponent,
    DatasetComponent,
    TransformComponent
} from 'echarts/components';
// 标签自动布局，全局过渡动画等特性
import { LabelLayout, UniversalTransition } from 'echarts/features';
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from 'echarts/renderers';
// 注册必须的组件
echarts.use([
    TitleComponent,
    TooltipComponent,
    GridComponent,
    DatasetComponent,
    TransformComponent,
    BarChart,
    LabelLayout,
    UniversalTransition,
    CanvasRenderer
]);

const Page1 = () => {
    const [time, setTime] = useState('')
    const [peoNumber, setpeoNumber] = useState([])
    const [per, setPer] = useState(['12%', '6%', '8%', '10%'])
    useEffect(() => {
        One()
        let date = new Date();
        let year = date.getFullYear(); //年
        let month = (date.getMonth() + 1).toString().padStart(2, "0"); //月
        let day = date.getDate().toString().padStart(2, "0"); //日;
        let h = date.getHours();
        h = h < 10 ? "0" + h : h;
        let m = date.getMinutes();
        m = m < 10 ? "0" + m : m;
        let format = year + "/" + month + "/" + day + " " + h + ":" + m
        setTime(format)

        // echart图 接下来的使用就跟之前一样，初始化图表，设置配置项
        // 第二个chart图
        var myChart1 = echarts.init(document.getElementById('main1'));
        myChart1.setOption(
            {
                xAxis: {
                    type: 'category',
                    data: ['00', '02', '04', '06', '08', '10', '12', '14', '16', '18', '20', '22']
                },
                yAxis: {
                    type: 'value'
                },
                color: ['#f7fbfe'],
                textStyle: {
                    color: '#f7fbfe'
                },
                series: [
                    {
                        data: [820, 932, 901, 934, 1290, 1330, 1320, 1000, 501, 302, 1600, 780],
                        type: 'line',
                        smooth: true
                    },

                ]
            });
        // 第三个echart图
        var myChart2 = echarts.init(document.getElementById('main2'));
        myChart2.setOption(
            {
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c} ({d}%)'
                },
                legend: {
                    data: [
                        '老客户',
                        '新客户'
                    ]
                },
                color: ['#19c66b', '#f6ae01'],
                series: [
                    {
                        name: 'Access From',
                        type: 'pie',
                        radius: ['45%', '60%'],
                        labelLine: {
                            length: 30
                        },
                        label: {
                            formatter: '  {b|{b}：}{c}  {per|{d}%}',
                            borderWidth: 1,
                            borderRadius: 4,
                            rich: {
                                a: {
                                    color: '#6E7079',
                                    lineHeight: 22,
                                    align: 'center'
                                },
                                hr: {
                                    borderColor: '#8C8D8E',
                                    width: '100%',
                                    borderWidth: 1,
                                    height: 0
                                },
                                b: {
                                    color: '#4C5058',
                                    fontSize: 14,
                                    fontWeight: 'bold',
                                    lineHeight: 33
                                },
                                per: {
                                    color: '#fff',
                                    backgroundColor: '#4C5058',
                                    padding: [3, 4],
                                    borderRadius: 4
                                }
                            }
                        },
                        data: [
                            { value: 1048, name: '老客户' },
                            { value: 335, name: '新客户' },

                        ]
                    }
                ]
            });
        // 获取表格信息

    }, [])
    // d动态渲染echart数据

    // 第一个Echart发送请求

    const One = () => {
        let dataNow = []
        let dataOld = []
        let dataTit = []
        var myChart = echarts.init(document.getElementById('main'));
        AllData.OneEchart().then((res) => {
            for (let i = 0; i < res.data.length; i++) {
                if (i == 0) {
                    const { one, two, three, four, five, six, seven, eight, nine, ten, eleven } = res.data[i]
                    const { visitorNumber, payUserNumber, pageviews, payAmount } = res.data[i]
                    dataTit.push(visitorNumber, payUserNumber, pageviews, payAmount)
                    dataNow.push(one, two, three, four, five, six, seven, eight, nine, ten, eleven)
                    setpeoNumber(dataTit)
                }
                if (i == 1) {
                    const { one, two, three, four, five, six, seven, eight, nine, ten, eleven } = res.data[i]
                    dataOld.push(one, two, three, four, five, six, seven, eight, nine, ten, eleven)
                }
            }
            // 第一个echart图
            myChart.setOption(
                {
                    xAxis: {
                        type: 'category',
                        data: ['00', '02', '04', '06', '08', '10', '12', '14', '16', '18', '20', '22']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    color: ['#266cff', '#f7c95d'],

                    series: [
                        {
                            data: dataNow,
                            type: 'line',
                            smooth: true
                        },
                        {
                            data: dataOld,
                            type: 'line',
                            smooth: true
                        }
                    ]
                });
        })
    }
    // 跳转页面
    const jumpNav = useNavigate()
    const goselectPeo = () => {
        jumpNav('/home/user/query')
    }
    const goVideo = () => {
        jumpNav('/home/course/video')
    }
    const goGrap = () => {
        jumpNav('/home/course/graphic')
    }
    const goAdvio = () => {
        jumpNav('/home/course/audio')
    }
    // 表格列
    const columns = [
        {
            title: '排名',
            dataIndex: 'ranking',
            key: 'ranking',
            width: 80,
            align: 'center',
            render: (text) => <a className='aaa'>{text}</a>,
        },
        {
            title: '课程信息',
            dataIndex: 'courseMsg',
            key: 'courseMsg',
            width: 300,
            render: (_, record) => {
                return (<div className='biaoge'>
                    <Image
                        className='img'
                        width={40}
                        height={40}
                        src={record.Src}
                    />
                    <span className='retit'>{record.tit}</span>
                </div>)
            }
        },
        {
            title: '访问量',
            dataIndex: 'traafic',
            key: 'traafic',
            width: 90,
            align: 'center',
        },
        {
            title: '支付量',
            dataIndex: 'paynum',
            key: 'paynum',
            width: 90,
            align: 'center',
        },
        {
            title: '支付转化率',
            dataIndex: 'paynums',
            key: 'paynums',
            width: 130,
            align: 'center',
        },
    ];
    // 表格数据
    const data = [
        {
            ranking: '1',

            traafic: 8000,
            paynum: 400,
            paynums: "5%",
            Src: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
            tit: '西班牙语0-B2高级直达'
        },
        {
            ranking: '2',

            traafic: 8000,
            paynum: 400,
            paynums: "5%",
            Src: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
            tit: '西班牙语0-B2高级直达'
        },
        {
            ranking: '3',

            traafic: 8000,
            paynum: 400,
            paynums: "5%",
            Src: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
            tit: '西班牙语0-B2高级直达'
        },
        {
            ranking: '4',

            traafic: 8000,
            paynum: 400,
            paynums: "5%",
            Src: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
            tit: '西班牙语0-B2高级直达'
        },
        {
            ranking: '5',
            traafic: 8000,
            paynum: 400,
            paynums: "5%",
            Src: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
            tit: '西班牙语0-B2高级直达'
        },
    ];
    return (<div className="page1App">
        <span className='tit'>系统首页</span>
        <span className='timer'>更新时间&nbsp;&nbsp;{time}</span>
        <div className='box'>
            <div className='box-mid' >
                <p className='visit'>访客数</p>
                <p className='visitnum'>{peoNumber[0]}</p>
                <p className='visitadd'>较昨日增加&nbsp;&nbsp;{per[0]}</p>
            </div>
            <div className='box-mid box-two' >
                <p className='visit'>付费用户数</p>
                <p className='visitnum'>{peoNumber[1]}</p>
                <p className='visitadd'>较昨日增加&nbsp;&nbsp;{per[1]}</p>
            </div>
            <div className='box-mid box-thr' >
                <p className='visit'>浏览量</p>
                <p className='visitnum'>{peoNumber[2]}</p>
                <p className='visitadd'>较昨日增加&nbsp;&nbsp;{per[2]}</p>
            </div>
            <div className='box-mid box-four' >
                <p className='visit'>支付订单数</p>
                <p className='visitnum'>{peoNumber[3]}</p>
                <p className='visitadd'>较昨日减少&nbsp;&nbsp;{per[3]}</p>
            </div>
        </div>

        <div className='echart'>
            <div className='echart-tit'>
                <div className='pay'>支付金额</div>
                <span className='pays'>今日支付金额(元)</span>
                <span className='pays'>昨日支付金额(元)</span>
                <div>
                    <span className='paynum'>640000</span>
                    <span className='paynum'>5600</span>
                </div>
            </div>

            <div id="main" style={{ width: "95%", height: '400px' }}></div>

            <div className="timeBox clear">
                <div className='now'>
                    <span className='nowtime'></span>
                    <span className='nowtime-tit'>今日</span>
                </div>
                <div className='today'>
                    <span className='today-tit'></span>
                    <span >昨日</span>
                </div>
            </div>
        </div>

        <div className='Bigbox clear'>
            <div className='left'>
                <div className='left-top'>
                    <span className='caozuo'>快速操作</span>
                    <div className='left-icon'>
                        <div className='left-icon-box' onClick={goselectPeo}>
                            <div className='left-icons'>
                                <Space style={{ fontSize: '30px', color: '#21a0ff' }}><UserOutlined /></Space>
                            </div>
                            <span>用户查询</span>
                        </div>
                        <div className='left-icon-box' onClick={goVideo}>
                            <div className='left-icons'>
                                <Space style={{ fontSize: '30px', color: '#21a0ff' }}><PlaySquareOutlined /></Space>
                            </div>
                            <span className=''>发布视频课程</span>
                        </div>
                        <div className='left-icon-box' onClick={goGrap}>
                            <div className='left-icons'>
                                <Space style={{ fontSize: '30px', color: '#21a0ff' }}><QrcodeOutlined /></Space>
                            </div>
                            <span>发布图文课程</span>
                        </div>
                        <div className='left-icon-box' onClick={goAdvio}>
                            <div className='left-icons'>
                                <Space style={{ fontSize: '30px', color: '#21a0ff' }}><AudioOutlined /></Space>
                            </div>
                            <span>发布音频课程</span>
                        </div>
                    </div>
                </div>
                <div className='left-bot'>
                    <p className='left-bot-tit'>销售量TOP5课程</p>
                    <Table columns={columns} dataSource={data} pagination={false} rowKey={(record) => record.ranking} />
                </div>
            </div>
            <div className='right'>
                <div className='right-top'>
                    <span className='right-tit'>实时学习人数(元)</span>
                    <div id="main1" style={{ width: '90%', height: '100%' }}></div>
                </div>
                <div className='right-bot'>
                    <div className='right-bottit'>今日新用户访问量占比</div>
                    <div id="main2" style={{ width: '100%', height: '100%', }}></div>
                </div>
            </div>
        </div>
    </div>
    );
}

export default Page1;